import { component$, type PropsOf, Slot } from '@builder.io/qwik';
import { cn } from '../cn';

export default component$(() => {
  return (
    <ul class="border border-kq-300 rounded">
      <Slot />
    </ul>
  );
});

type ListItemProps = PropsOf<'li'>;

export const ListItem = component$<ListItemProps>((props) => {
  const classes = cn('border-t first:border-0 border-kq-300 hover:bg-kq-100 px-4 py-2 text-base', props.class);
  return (
    <li {...props} class={classes}>
      <Slot />
    </li>
  );
});

type ListHeaderProps = PropsOf<'li'>;

export const ListHeader = component$<ListHeaderProps>((props) => {
  const classes = cn('border-0 bg-kq-200 px-4 py-2 font-bold text-base', props.class);
  return (
    <li {...props} class={classes}>
      <Slot />
    </li>
  );
});

type ListFooterProps = PropsOf<'li'>;

export const ListFooter = component$<ListFooterProps>((props) => {
  const classes = cn('border-t border-kq-300 px-4 py-2 text-base', props.class);
  return (
    <li {...props} class={classes}>
      <Slot />
    </li>
  );
});
